<script setup>
import { computed, ref } from 'vue'
import { griddata, griddata2, griddata3, griddata4 } from '../../api/assistant'
import { useRouter } from 'vue-router';
import { showSuccessToast, showFailToast } from 'vant';

const router = useRouter()
const gridlist = ref([])
const gridlist2 = ref([])
const gridlist3 = ref([])
const gridlist4 = ref([])
griddata().then(res => {
    // console.log(res.data);
    gridlist.value = res.data.data
})
griddata2().then(res1 => {
    // console.log(res1.data);
    gridlist2.value = res1.data.data
})
griddata3().then(res2 => {
    // console.log(res2.data);
    gridlist3.value = res2.data.data
})

griddata4().then(res2 => {
    // console.log(res2.data);
    gridlist4.value = res2.data.data
})

function onClickRight() {
    console.log(111);
    router.push('/notice')

}


function gridres1(value) {
    if (value.text === '通讯') {
        router.push('/top')
    } else if (value.text === '咖影院') {
        router.push('/assia1')
    } else if (value.text === '电影票') {
        showFailToast('抱歉功能正在维护中')
    }
}
function gridres2(value) {
    if (value.text === '咖档案') {
        router.push('/top1')
    } else if (value.text === '服务') {
        router.push('/step2')
    } else if (value.text === '地图') {
        router.push('/map')

    } else if (value.text === '日程') {
        router.push('/top4')

    } else if (value.text === '客服') {
        router.push('/top5')

    } else {
        showFailToast('抱歉功能暂未开放')
    }

}
function gridres3(value) {
    if (value.text === '附近') {
        router.push('/top2')
    } else {
        showFailToast('抱歉功能暂未开放')

    }

}
function gridres4(value) {
    if (value.text === '帮助') {

        router.push('/top3')
    } else if (value.text === '须知') {
        router.push('/inform')

    } else if (value.text === '安全') {
        router.push('/help')

    } else {
        showFailToast('由于功能过于神秘，亲您耐心等待')

    }
}
</script>

<template>
    <div class="box">
        <van-nav-bar title="咖助手" right-text="通知" @click-right="onClickRight" />


        <div class="content">
            <div class="top"></div>
            <van-notice-bar left-icon="volume-o" text="1Tips: 如需使用网络及通讯，请在咖助理处开通哦!" />
            <van-cell-group>
                <van-cell title="咖助理" value="已开通一项" />
            </van-cell-group>
            <van-grid :column-num="5">
                <van-grid-item v-for="value in gridlist" :key="value.id" :icon="value.img" :text="value.text"
                    @click="gridres1(value)" />
            </van-grid>
            <van-cell-group>
                <van-cell title="咖服务" value="" />
            </van-cell-group>

            <van-grid :column-num="5">
                <van-grid-item v-for="value in gridlist2" :key="value.id" :icon="value.img" :text="value.text"
                    @click="gridres2(value)" />
            </van-grid>

            <van-cell-group>
                <van-cell title="咖出行" value="" />
            </van-cell-group>

            <van-grid :column-num="5">
                <van-grid-item v-for="value in gridlist3" :key="value.id" :icon="value.img" :text="value.text"
                    @click="gridres3(value)" />
            </van-grid>

            <van-cell-group>
                <van-cell title="咖帮手" value="" />
            </van-cell-group>
            <van-grid :column-num="5">
                <van-grid-item v-for="value in gridlist4" :key="value.id" :icon="value.img" :text="value.text"
                    @click="gridres4(value)" />
            </van-grid>



        </div>
    </div>
</template>


<style lang="scss" scoped>
// html,
// body,
// .box {
//     width: 100%;
//     height: 100%;
// }

// .box1 {
//     padding-left: 20px;
//     padding-top: 10px;
//     padding-bottom: 10px;
//     padding-right: 20px;
//     box-sizing: border-box;
// }

.top {
    width: 100%;
    height: 30%;
    background: url(https://img1.baidu.com/it/u=4067891360,1758857895&fm=253&fmt=auto&app=138&f=JPEG?w=1134&h=500) no-repeat 100%/cover;
    border-radius: .2rem;

}

// .footer {
//     height: 0.5rem;
//     border-top: 1px solid gray;
//     display: flex;
//     position: absolute;
//     bottom: 0; 
//     width: 100%;
//     line-height: 0.5rem;
// }
</style>

